<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>总配送订单</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
            padding: 20px;
        }

        .container {
            max-width: 960px;
            margin: auto;
        }

        .sidebar {
            margin-bottom: 30px;
        }

        .nav-link.active {
            background-color: #007bff;
            color: white !important;
            font-weight: bold;
        }

        .table-action {
            min-width: 120px;
        }

        .btn-accept {
            background-color: #007bff;
            border-color: #007bff;
            color: white;
        }

        .btn-accept:hover {
            background-color: #0069d9;
            border-color: #0062cc;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-3">
            <div class="sidebar">
                <ul class="nav nav-pills flex-column mb-4">
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/courier/main}">我的信息</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/courier/pending-orders}">需配送订单</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" th:href="@{/courier/total-orders}">总配送订单</a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-md-9">
            <div class="card mb-4">
                <div class="card-header bg-primary text-white">
                    <h1 class="card-title mb-0">总配送订单</h1>
                </div>
                <div class="card-body p-0">
                    <div class="table-responsive">
                        <table class="table table-striped mb-0">
                            <thead class="table-light">
                            <tr>
                                <th>订单编号</th>
                                <th>用户ID</th>
                                <th>配送地址</th>
                                <th>下单时间</th>
                                <th class="table-action">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr th:each="order : ${allPendingOrders}">
                                <td th:text="${order.orderId}"></td>
                                <td th:text="${order.userId}"></td>
                                <td th:text="${order.address}"></td>
                                <td th:text="${#temporals.format(order.createdAt, 'yyyy-MM-dd HH:mm')}">2023-06-22 15:30</td>
                                <td>
                                    <form th:action="@{/courier/accept-order/{orderId}(orderId=${order.orderId})}" method="post" class="d-inline">
                                        <button type="submit" class="btn btn-accept btn-sm">接取</button>
                                    </form>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:if="${error != null}" style="display:none">
    <script>
        window.onload = function() {
            alert('配送员当前订单数量已达到上限，无法接单');
            history.back();
        };
    </script>
</div>

<!-- 引入 Bootstrap JS 和依赖 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>